<template>
  <div class="industry-detail">
    <template v-if="!showEdit">
      <HeaderNav :bgStyle="bgStyle" :show-edit="true" @edit="toEdit" />

      <div class="detail-main">
        <div class="industry-header">
          <img :src="reportDetail.coverImage || DefaultBg" alt="" />
          <div class="info-name">{{ reportDetail.reportTitle }}</div>
          <div class="info-tags">
            <van-tag
              round
              type="primary"
              v-for="(sItem, index) of getLabels(reportDetail.reportLabels)"
              :key="index"
              >{{ sItem }}</van-tag
            >
          </div>
          <div class="item-date">发布时间：{{ reportDetail.reportDate }}</div>
        </div>

        <div class="industry-content">
          <div
            class="bg"
            v-html="reportDetail.reportContent"
            v-if="reportDetail.isOriginal === 'Y'"
          ></div>
          <div
            class="file"
            v-for="(item, index) of reportAnnexData"
            :key="index"
          >
            <img src="@/assets/see-2.png" @click="previewItem(item)" alt="" />
            <div>
              <a class="u-pdf" :href="item" target="_blank">{{ item }}</a>
            </div>
          </div>
        </div>
      </div>
    </template>

    <AddOrEdit
      :reportDetail="reportDetail"
      :reportLabelsData="reportLabelsData"
      @update="updateReport"
      @close="showEdit = false"
      v-if="showEdit"
    />
  </div>
</template>

<script setup lang="ts" name="IndustryDetail">
import { computed, ref } from "vue";
import HeaderNav from "@/components/headerNav/index.vue";
import AddOrEdit from "./addOrEdit.vue";
import DefaultBg from "./assets/default-bg.png";
import { getReport, reportLabelsList } from "@/views/industryReport/fetchData";
import { useRoute } from "vue-router";
import { closeToast, showLoadingToast } from "vant";

const route = useRoute();
const reportDetail = ref<Record<string, any>>({
  id: "",
  reportTitle: "",
  reportLabels: "",
  reportDate: "",
  reportContent: "",
  reportAnnex: "",
  coverImage: "",
  isOriginal: ""
});
const bgStyle = computed(() => {
  return {
    background: `url(${
      reportDetail.value.coverImage || DefaultBg
    }) no-repeat center`
  };
});
const showEdit = ref(false);
const reportLabelsData = ref<Record<string, any>[]>([]);
const reportAnnexData = ref<string[]>([]);

function toEdit() {
  showEdit.value = true;
}

function updateReport() {
  showEdit.value = false;
  getDetail();
}

function previewItem(file: string) {
  if (!file.includes(".pdf")) return window.open(file);
}

function getLabels(labels: string) {
  const arr = labels.split(",");
  const _labels: string[] = [];
  reportLabelsData.value.forEach(item => {
    if (arr.includes(item.id)) _labels.push(item.labels);
  });
  return _labels;
}

function getDetail() {
  if (!route.query.id) return (showEdit.value = true);
  showLoadingToast({
    duration: 0, // 持续展示 toast
    forbidClick: true,
    overlay: true,
    message: "加载中..."
  });
  getReport(route.query.id as string)
    .then(res => {
      reportDetail.value = res.data;
      reportAnnexData.value = res.data.reportAnnex
        ? res.data.reportAnnex.split(",")
        : [];
    })
    .finally(() => closeToast());
}

function getReportLabelsData() {
  reportLabelsList("").then((res: any) => {
    reportLabelsData.value = res.rows || [];
  });
}

getReportLabelsData();
getDetail();
</script>

<style scoped lang="less">
.industry-detail {
  position: relative;
  background-color: #f3f4fa;

  .detail-main {
    position: absolute;
    top: 4rem;
    left: 1rem;
    width: calc(100% - 2rem);
    height: calc(100% - 4rem);
    display: flex;
    flex-direction: column;

    .industry-header {
      padding: 1rem;
      background-color: #fff;
      border-radius: 1rem;

      img {
        width: 9.7rem;
        height: 5rem;
        margin-bottom: 0.6rem;
        object-fit: contain;
      }

      .info-name {
        font-size: 1.2rem;
        font-weight: 700;
      }

      .info-tags {
        .van-tag {
          margin-right: 0.5rem;
        }
      }

      .item-date {
        margin-top: 0.6rem;
        color: #999;
        font-size: 0.8rem;
      }
    }

    .industry-content {
      flex: 1;
      height: 0;
      padding: 1rem 0;
      overflow: auto;

      .file {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 1rem;
        overflow: auto;

        iframe {
          width: 100%;
          height: 20rem;
        }

        img {
          margin-right: 0.5rem;
        }

        div {
          word-break: break-all;
        }
      }
    }
  }
}
</style>
